<template>
  <!-- 日历插件 -->
  <div class="container">
    <div class="container-son">
      <FullCalendar
        id="calendar"
        class="demo-app-calendar"
        ref="fullCalendar"
        :slotEventOverlap="false"
        locale="zh-cn"
        :timeGridEventMinHeight="20"
        :allDaySlot="false"
        :eventLimit="true"
        :eventLimitText="eventLimitText"
        :nowIndicator="true"
        :height="'parent'"
        :droppable="true"
        :views="eventLimitNum"
        :displayEventEnd="false"
        :slotLabelFormat="{
          hour: 'numeric',
          minute: '2-digit',
          omitZeroMinute: false,
          meridiem: 'short',
          hour12: false
        }"
        :displayEventTime="false"
        :buttonText="{
          // 顶部按钮的文字显示
          prev: '上一月',
          next: '下一月',
          today: '回到今天',
          month: '月视图'
        }"
        :businessHours="this.businessHours"
        :columnHeaderText="columnHeaderText"
        :events="calendarEvents"
        :selectable="true"
        :selectMirror="true"
        @dateClick="dayClick"
        @eventClick="eventClick"
        @select="select"
        :longPressDelay="0"
        :options="calendarOptions"
      />

      <!-- @eventPositioned="eventPositioned"  -->
      <!-- @eventMouseEnter="eventMouseEnter"  -->
      <!-- @select="select" 选择日期格子添加事件 -->
      <!-- :editable="true"  是否可编辑 -->
      <!-- :longPressDelay="0" 拖动多选时延迟的时间，如果不设置默认是1秒-->
    </div>
    <div></div>
  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
// import momentPlugin from '@fullcalendar/moment'
import dateUtil from "@/utils/dateUtils";

export default {
  components: {
    FullCalendar //注册组件
  },
  props: {
    // 日历周末是否显示灰色背景
    businessHoursp: {
      type: Boolean,
      default: false
    },
    selectDate: {
      type: Function,
      default: null
    },
    calendarEvents: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      calendarApi: null,
      eventLimitNum: {
        // 事件显示数量限制(周视图)
        dayGrid: {
          eventLimit: 6
        },
        // 事件显示数量限制(日视图)
        timeGrid: {
          eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
        }
      },
      // 表头的显示内容
      columnHeaderText: function(date) {
        let day = date.getDay();
        let map = {
          0: "周日",
          1: "周一",
          2: "周二",
          3: "周三",
          4: "周四",
          5: "周五",
          6: "周六"
        };
        return map[day];
      },
      businessHours: this.businessHoursp,
      calendarWeekends: false, //是否更改周日显示的位置

      calendarOptions: {
        dayCellContent: this.dayCon, //自定义日期显示样式
        dayCellDidMount: this.datev, //自定义日历
        //插件引入后在此声明后，才可使用
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin //dateClick点击事件和Draggable移动事件需要此插件
        ],
        //头部菜单展示
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth"
        },
        initialView: "dayGridMonth" //默认展示的日历视图
      }
    };
  },
  mounted() {
    // this.calendarApi = this.$refs.fullCalendar.getApi();
    // this.calendarApi.render(); //初始化日历
    console.log(this.$refs.fullCalendar);
    // let newDate = dateUtil.formatDate(new Date());
  },
  methods: {
    // 日历回调函数
    dayRender(date) {},
    // 判断是否是周末，改变日期的颜色
    dayCon(arg) {
      if (arg.date.getDay() == 0 || arg.date.getDay() == 6) {
        return {
          html:
            '<a style="color: red" class="fc-daygrid-day-number">' +
            arg.dayNumberText +
            "</a>"
        };
      } else {
        return arg.dayNumberText;
      }
    },
    // 判断是否是周末，给日历元素添加自定义文字
    datev(arg) {
      // let italicEl = document.createElement('i')
      //
      // if (arg.event.extendedProps.isUrgent) {
      //   italicEl.innerHTML = 'urgent event'
      // } else {
      //   italicEl.innerHTML = 'normal event'
      // }
      //
      // let arrayOfDomNodes = [ italicEl ]
      // return { domNodes: arrayOfDomNodes }
      // console.log("arg------------");

      // console.log(arg);
      // console.log(arg.date.getDay());

      if (arg.date.getDay() == 0 || arg.date.getDay() == 6) {
        // console.log(arg.el);
        arg.el.innerHTML =
          '<div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">' +
          "<div style='height: 100%;position: absolute;top: 0;width: 100%;display: flex;justify-content: center;align-items: center;color: red;'> <span>休</span> </div>" +
          "</div>";
      }
    },
    // 这个方法可以调整周末在第一列还是最后一列
    toggleWeekends() {
      this.calendarWeekends = !this.calendarWeekends;
    },

    // 拖动结束后会触发此事件，更新日历，有数据的格子都会触发一次，回调就是这个格子的所有信息
    eventPositioned(info) {
      // console.log(info),  //返回每个日历格子的对象属性
      //  console.log('事件被放置在日历的最终位置后触发')
    },

    //  当超过规定的时间数量时显示的提示字样，需要配合使用 eventLimitNum 配置最多显示数量
    eventLimitText() {
      return "更多";
    },
    // 切换视图重新加载数据时会触发这个回调
    datesRender(info) {
      // console.log(info);
      // console.log('当呈现一组新的日期时触发。')
    },

    // 两个事件都是全天活动时才允许重叠
    eventOverlap(stillEvent, movingEvent) {
      return stillEvent.allDay && movingEvent.allDay;
    },
    // 点击日期格子事件
    dayClick(date) {
      console.log(date);
      if (this.selectDate != null) {
        this.selectDate(date.dateStr, "");
      }
    },
    // 点击日历格子内的事件
    eventClick(date) {
      // console.log(date.event.start,date.event.end);
      let start = dateUtil.formatDate(new Date(date.event.start));
      let end = dateUtil.formatDate(new Date(date.event.end));
      console.log(start, end);
    },
    // 选择日期格子添加事件
    select(date) {
      console.log(date);
      if (this.selectDate != null) {
        this.selectDate(date.startStr, date.endStr);
      }

      // var title = prompt('新增事件:');  //这个是window的弹窗事件，可以根据需要改成项目中使用框架的弹窗，这里使用easyui的vue版框架
      //  this.$messager.prompt({
      //   title: "新增事件:",
      //   icon: "info",
      //   msg: "请输入事件名称",
      //   result: r => {
      //     if (r) {
      //       // 日历的添加事件
      //       this.calendarApi.addEvent({
      //         title: r,
      //         start: date.start,
      //         end: date.end,
      //         allDay: date.allDay
      //       });
      //       this.calendarApi.unselect()   //注销选择事件
      //     }
      //   }
      // });
    },

    // 日期格子内划入事件时触发，鼠标滑过，鼠标划入
    eventMouseEnter(info) {
      //可从info中解构我们需要的东西
      // console.log('划入事件时触发。',info)
    },
    // ...
    // 获取插件中的方法，比如回到今天的today()方法,下面的为自定义的
    backToday() {
      console.log("回到今天！");
      let calendarApi = this.$refs.fullCalendar.getApi(); //通过getApi()方法获取
      calendarApi.today(); //调用回到今天的today()方法
    }
  }
};
</script>
<style scoped>
/* “~”指向 node_modules */
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container-son {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden; /* don't do scrollbars */
  font-size: 14px;
}
.clorred {
  background-color: red;
}
</style>
